// 局部混入mixin_linkage.js文件 菜单商品列表双向联动

export default {
	data() {
		return {
			
			scrollHeight: 0, // 滚动区域高度
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0, // 左边菜单item的高度
			scrollTop: 0, // 左侧滚动距离
			itemId: '', // 左侧用于滚动的id
			cate: 0, // 当前分类 index
			
			goods: [], // 商品
			oldScrollTop: 0,
			arr: [], // 右侧每个item到顶部的距离的数组
			scrollRightTop: 0, // 右侧scroll-view的滚动条高度
			timer: null, // 定时器
		}
	},
	onReady() {
		this.getMenuItemTop()
	},
	methods: {
		// 点击左边的栏目切换
		async swichMenu(index) {
			if(this.arr.length == 0) {
				await this.getMenuItemTop()
			}
			if (index == this.cate) return
			this.scrollRightTop = this.oldScrollTop
			this.$nextTick(function(){
				this.scrollRightTop = this.arr[index]
				this.cate = index
				this.leftMenuStatus(index)
			})
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this)
				query.select('.' + elClass).fields({
					size: true
				}, res => {
					// 如果节点尚未生成，res值为null，循环调用执行
					if (!res) {
						setTimeout(() => {
							this.getElRect(elClass)
						}, 10)
						return
					}
					this[dataVal] = res.height
					resolve()
				}).exec()
			})
		},
		// 设置左边菜单的滚动状态
		async leftMenuStatus(index) {
			this.cate = index
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('good-box', 'menuHeight')
				await this.getElRect('cate-item', 'menuItemHeight')
			}
			// 将菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
		},
		// 获取右边菜单每个item到顶部的距离
		getMenuItemTop() {
			new Promise(resolve => {
				let selectorQuery = uni.createSelectorQuery().in(this)
				selectorQuery.selectAll('.good-cate').boundingClientRect((rects) => {
					// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
					if(!rects.length) {
						setTimeout(() => {
							this.getMenuItemTop()
						}, 10)
						return
					}
					rects.forEach((rect) => {
						// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
						this.arr.push(rect.top-rects[0].top)
						resolve()
					})
				}).exec()
			})
		},
		// 右边菜单滚动
		async rightScroll(e) {
			this.oldScrollTop = e.detail.scrollTop
			if (this.arr.length == 0) {
				await this.getMenuItemTop()
			}
			if (this.timer) return
			if (!this.menuHeight) {
				await this.getElRect('good-box', 'menuHeight')
			}
			setTimeout(() => { // 节流
				this.timer = null
				// scrollHeight为右边菜单垂直中点位置
				let scrollHeight = e.detail.scrollTop + this.menuHeight / 2
				for (let i = 0; i < this.arr.length; i++) {
					let height1 = this.arr[i]
					let height2 = this.arr[i + 1]
					// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
					if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
						this.leftMenuStatus(i)
						return
					}
				}
			}, 10)
		}
	}
	
}